<template>
  <view class="container">
    <view style="height: 700rpx; border: thin solid #000">
      <jp-signature ref="signatureRef"></jp-signature>
      <view class="button-group">
        <u-button class="action-btn" @click="clear">清空</u-button>
        <u-button class="action-btn" @click="undo">撤消</u-button>
        <u-button class="action-btn" @click="save">保存</u-button>
      </view>
    </view>
    <view class="end-class-section">
      <view class="button-card start" @click="endClass">
        <text>结束课程</text>
      </view>
    </view>
  </view>
</template>

<script>
import { stop, getCount, editCount } from "../../api/fit";
export default {
  data() {
    return {
      id: "",
      customerId: "",
      infoCount: {},
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.id = options.id;
    this.customerId = options.customerId;
    this.getNum();
    // 初始化当前选中的标签
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // this.$refs.paging.reload();
  },
  /**
   * 生命周期函数--监听页面的卸载
   */
  onUnload() {
    // 卸载全局事件订阅
    uni.$off("syncRefresh");
  },

  methods: {
    async getNum() {
      const res = await getCount(this.customerId);
      this.infoCount = res.data;
    },
    save() {
      this.$refs.signatureRef.canvasToTempFilePath({
        success: (res) => {
          // 保存签字逻辑
          uni.showToast({
            title: "签字保存成功",
            icon: "success",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            },
          });
        },
      });
    },
    clear() {
      this.$refs.signatureRef.clear();
    },
    undo() {
      this.$refs.signatureRef.undo();
    },
    async endClass() {
      const res = await stop({
        id: this.id, // 假设课程ID通过路由参数传递
        izSign: "2",
      });
      if (res.code === 200) {
        editCount({
          customerId: this.customerId,
          count: Number(this.infoCount.total) + 1,
        }).then((res) => {
          uni.showToast({
            title: "课程已结束",
            icon: "success",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            },
          });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.button-group {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}

.action-btn {
  flex: 1;
  margin: 0 10rpx;
  padding: 20rpx;
  background: #000;
  color: #fff;
  border-radius: 20rpx;
  font-size: 28rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
  }
}

.end-class-section {
  position: fixed;
  bottom: 30rpx;
  left: 0;
  right: 0;
  padding: 0 30rpx;
}

.end-class-btn {
  width: 100%;
  padding: 20rpx;
  background: #000;
  color: #fff;
  border-radius: 20rpx;
  font-size: 32rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
  }
}

.button-card {
  background: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  transform: translateY(0);
  transition: all 0.3s ease;

  &.start {
    background: #000;
    color: #fff;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.4);
    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
    }
  }

  &.timer {
    background: #000;
    color: #fff;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);

    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }
  }

  &.end {
    background: #fff;
    color: #000;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);

    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
